<template>
  <div class="playlists">
    <div class="playlist-top" @click="TogetDetail(id)">
      <div class="play-top-bg"></div>
      <div class="play-top-mask"></div>
      <div class="Playlist-top-box">
        <div class="Play-top-img">
          <img :src="$utils.getImgUrl(PlaylistNav.coverImgUrl,140,140)" alt />
        </div>
        <div class="Playlist-top-text">
          <div class="Playlist-top-text-btn">精品歌单</div>
          <p class="Playlist-top-text-playlistname">{{PlaylistNav.name}}</p>
          <p class="Playlist-top-text-contente">{{PlaylistNav.description}}</p>
        </div>
      </div>
    </div>
    <div class="playlist-top-nav">
      <ul class="playlist-nav">
        <li
          class="playlist-nav-item"
          :class="[activeIndex ===index ? 'active' : '']"
          @click="handleClicknav(index)"
          v-for="(nav,index) of navs"
          :key="nav"
        >{{nav}}</li>
      </ul>
    </div>

    <!--///////////////////////////////////////////////////////////////////////////////-->

    <div class="playlist-center">
      <ul class="playlist-songs">
        <li
          class="play-list-item"
          @click="getPlaylistId(item)"
          v-for="item of playLists"
          :key="item.id"
        >
          <div class="play-list-box">
            <img :src="$utils.getImgUrl(item.coverImgUrl,200, 200)" alt class="play-list-img" />
            <div class="play-list-tip">{{ item.name }}</div>
            <div class="play-list-btn">
              <i class="play-icon iconfont icon-component icon-play"></i>
            </div>
            <div class="play-list-title">{{item.description}}</div>
          </div>
        </li>
      </ul>
    </div>

    <!--分页器-->
    <div class="text-ye" style="float:right">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :current-page="page"
        :page-size="pageSize"
        @current-change="Changes"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { fetchPlayList, fetchPlayListSongsId } from "../api";

export default {
  data() {
    return {
      navs: [
        "全部",
        "欧美",
        "华语",
        "流行",
        "说唱",
        "摇滚",
        "民谣",
        "电子",
        "轻音乐",
        "影视原声",
        "ACG",
        "怀旧",
        "治愈",
        "旅行",
      ],
      activeIndex: 0,
      activeNva: "全部",
      //上面精品歌单储存的数据
      PlaylistNav: [],

      page: 1,
      pageSize: 50,
      total: 0,
      playLists: [],
      playListId: [],
      songsId: [],
      arrId: [],
      id: [],
    };
  },

  mounted() {
    this.init();
  },

  methods: {
    init() {
      this.getPlayListSongsId();
      this.getPlayListTop();
    },
    handleClicknav(index) {
      this.activeIndex = index;
      this.activeNva = this.navs[index];
      //console.log(this.activeNva);

      //发送请求
      this.getPlayListTop();
    },
    //发送列表歌单的id
    getPlaylistId(itemId) {
      this.$router.push({
        path: "/PlaylistDetail",
        query: {
          Arrid: itemId.id,
        },
      });
    },

    TogetDetail() {
      this.$router.push({
        path: "/PlaylistDetail",
        query: {
          Arrid: this.songsId,
        },
      });
    },
    Changes(page) {
      this.page = page;
      this.getPlayListTop();
    },
    getPlayListTop() {
      fetchPlayList({
        offset: (this.page - 1) * this.pageSize,
        limit: this.pageSize,
        cat: this.activeNva,
      }).then((res) => {
        this.playLists = res.playlists;
        this.total = res.total;
        //console.log(this.Arrid);
        // console.log(this.songsId);
        // console.log(this.playLists);
      });
    },
    getPlayListSongsId() {
      fetchPlayListSongsId({ limet: 1 }).then((res) => {
        this.playListId = res.playlists;
        //console.log(this.playListId);
        this.songsId = this.playListId[0].id;
        //上面精品歌单储存的数据
        this.PlaylistNav = res.playlists[0];
        //console.log(this.PlaylistNav);
      });
    },
  },
};
</script>

<style lang='less' scoped>
.palylists {
  padding: 0 30px;
}
.playlist-top {
  position: relative;
  height: 180px;

  background-color: gray;
  border-radius: 9px;
  margin-top: 20px;
  overflow: hidden;
  .play-top-bg {
    position: absolute;
    height: 100%;
    width: 100%;
    border-radius: 6px;
    z-index: 0;
    background: url("http://p3.music.126.net/IZaKdskHvigujL5GZW-QtQ==/1377688069888740.jpg");
    background-repeat: no-repeat;
    filter: blur(16px);
  }
  .play-top-mask {
    position: absolute;
    left: 0;
    bottom: 0;
    top: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 0;
  }

  .Playlist-top-box {
    position: relative;
    z-index: 1;
    padding: 7px;
    display: flex;
  }
  .Play-top-img {
    margin: 11px;
    width: 140px;
    height: 140px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .Playlist-top-text {
    flex: 1;
    .Playlist-top-text-btn {
      height: 30px;
      width: 88px;
      border: 1px solid #efb6b2;
      padding: 5px 10px;
      color: #efb6b2;
      margin-top: 11px;
    }
    .Playlist-top-text-playlistname {
      margin: 8px 0;
      color: white;
    }
    .Playlist-top-text-contente {
      font-size: 13px;
      line-height: 1.4;
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;

      color: #909090;
    }
  }
}
.playlist-top-nav {
  .playlist-nav {
    height: 40px;
    flex: 1;
    float: right;
    margin-top: 15px;
    overflow: hidden;
    //触发bfc
  }
  .playlist-nav-item {
    height: 100%;
    float: left;
    font-size: 12px;
    color: #666;
    margin-right: 20px;

    cursor: pointer; //鼠标

    &:hover {
      color: black;
    }
    &.active {
      color: red;
    }
  }
}
.playlist-center {
  .playlist-songs {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding-top: 8px;
  }
  .play-list-item {
    width: 20%;
    min-width: 120px;
    padding: 0 16px 18px 0px;
    flex-shrink: 1;
  }
  .play-list-box {
    position: relative;
    left: 5px;

    border-radius: 6px;
    overflow: hidden;
    &:hover {
      .play-list-tip {
        transform: translateY(0);
      }

      .play-list-btn {
        opacity: 0.7;
      }
    }
  }
  .play-list-img {
    height: 100%;
    width: 100%;
    border-radius: 6px;
  }
  .play-list-tip {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.3);
    font-size: 12px;
    line-height: 18px;
    color: #fff;
    padding: 4px 8px;

    transform: translateY(-100%);
    transition: all 0.3s;
  }
  .play-list-btn {
    position: absolute;
    bottom: 32px;
    right: 9px;
    width: 36px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.7);
    line-height: 36px;
    text-align: center;
    color: red;
    border-radius: 50%;

    opacity: 0;
    transition: all 0.3s;

    .icon-play {
      font-size: 22px;
      margin-left: 1px;
    }
  }

  .play-list-title {
    padding-top: 6px;
    font-size: 12px;
    color: #666;
    width: 100%;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>